<template>
	<view class="uni-common-mt">
		<m-select />
		<view>
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item class="banner-warp">
								<view class="image-content swiper-item"><image class="banner" mode="" :src="src"></image></view>
							</swiper-item>
							<swiper-item class="banner-warp">
								<view class="image-content swiper-item"><image class="banner" mode="" :src="src"></image></view>
							</swiper-item>
							<swiper-item class="banner-warp">
								<view class="image-content swiper-item"><image class="banner" mode="" :src="src"></image></view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="flex icon-tip">
			<view class="icon" v-for="(item, index) in imgIcon" :key="index">
				<uni-icons class="icons" color="#1ba2ff" :type="item.ic" size="30"></uni-icons>
				<text class="icon-dic">{{ item.text }}</text>
				<text class="icon-dic icon-dic-num">{{ item.num }}</text>
			</view>
		</view>
		<view class="notice-tip">
			<view>
				<!-- <image src="../../static/img/qq.png" mode=""></image> -->
				<uni-notice-bar
					showIcon="true"
					scrollable="true"
					:speed="100"
					text="[通知公告]这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar"
				></uni-notice-bar>
			</view>
		</view>
		<view class="flex icon-tip icon-img">
			<view class="icon icon-img-item" v-for="(item, index) in img" @click="handlerIcon(index)" :key="index">
				<uni-icons class="icons" color="#1ba2ff" :type="item.ic" size="30"></uni-icons>
				<text class="icon-dic">{{ item.text }}</text>
			</view>
		</view>
		<view class="">
			<m-tip :tip="tip.hd" @more="more" />
			<m-list :list="activitylist" @itemDic="itemDic" @sign="sign" />
		</view>
		<view class="">
			<m-tip :tip="tip.zt" @more="more" />
			<m-listImg :list="list" />
		</view>
	</view>
</template>

<script>
import mSelect from '../../components/selcet.vue';
import mList from '../../components/list.vue';
import mListImg from '../../components/listImg.vue';
import mTip from '../../components/tip.vue';
import uniNoticeBar from '../../components/module/uni-notice-bar/uni-notice-bar.vue';
import uniNavBar from '../../components/module/uni-nav-bar/uni-nav-bar.vue';
import uniIcons from '../../components/module/uni-icons/uni-icons.vue';

import { getAction, topicList, indexClientKnowledge } from '../../utils/require.js';
export default {
	components: {
		mSelect,
		uniIcons,
		uniNoticeBar,
		uniNavBar,
		mList,
		mTip,
		mListImg
	},
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			tip: {
				hd: {
					left: '活动中心',
					index: 'hd',
					right: '查看更多活动>'
				},
				zt: {
					left: '创新创业载体',
					index: 'zt',
					right: '查看更多载体>'
				},
				ds: {
					left: '双创导师',
					index: 'ds',
					right: '查看更多导师>'
				},
				jg: {
					left: '服务机构',
					index: 'jg',
					right: '查看更多机构>'
				}
			},
			activitylist: [
				{
					img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
					tit: '蛇胆川贝散实木地板SV三等奖',
					dic: '基本上都此卡的城市本上都此卡的城市本上都此卡的城市本上都此卡的城市本上都此卡的城市本上都此卡的城市看电视',
					state: 0,
					upSign: 0
				},
				{
					img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
					tit: '蛇胆川贝散',
					dic: '基本上都此卡的城市看电视',
					state: 1,
					upSign: 1
				},
				{
					img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
					tit: '蛇胆川贝散',
					dic: '基本上都此卡的城市看电视',
					state: 2,
					upSign: 2
				}
			],
			images: require('../../static/img/home.png'),
			src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
			imgIcon: [],
			ic: [
				{ ic: 'flag-filled', text: '载体', num: 201 },
				{ ic: 'images-filled', text: '机构', num: 120 },
				{ ic: 'map-filled', text: '活动', num: 145 },
				{ ic: 'email-filled', text: '企业', num: 345 },
				{ ic: 'cloud-upload-filled', text: '创新卷', num: 722 },
				{ ic: 'weibo', text: '政策', num: 98 },
				{ ic: 'weixin', text: '微信', num: 98 }
			],
			img: [
				{ ic: 'flag-filled', text: '上传' },
				{ ic: 'images-filled', text: '机构' },
				{ ic: 'map-filled', text: '活动' },
				{ ic: 'email-filled', text: '企业' },
				{ ic: 'cloud-upload-filled', text: '创新卷' },
				{ ic: 'weibo', text: '政策' },
				{ ic: 'weixin', text: '微信' }
			],
			list: [
				{
					img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
					tit: '标题1csdcdbfgfghngh',
					txt: '会计师对本次设计都是打车会计师对本次设计都是打车会计师对本次设计都是打车',
					state: 0,
					up_sta: true
				},
				{
					img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
					tit: '标题2',
					txt: '立丰国际漯河市草拟吗熟悉爱开网店SV打个包',
					state: 1,
					up_sta: false
				},
				{
					img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
					tit: '标题1',
					txt: '会计师对本次设计都是打车会计师对本次设计都是打车会计师对本次设计都是打车',
					state: 0,
					up_sta: true
				},
				{
					img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
					tit: '标题2',
					txt: '立丰国际漯河市草拟吗熟悉爱开网店SV打个包',
					state: 1,
					up_sta: false
				}
			],
			title: 'input',
			focus: false,
			inputValue: '',
			changeValue: '',
			queryParam: {
				actType: '',
				pageNo: 1,
				pageSize: 4,
				serType: '',
				title: ''
			}
		};
	},
	onLoad() {
		this.activityMsg(this.queryParam);
		this.messageAPI();
		this.getIndexClientKnowledge();
	},
	methods: {
		handlerIcon(n){
			if(n===0){
				uni.navigateTo({
					url:'../upload/upload'
				})
			}
		},
		// 事件列表报名按钮
		sign(n) {},
		getIndexClientKnowledge() {
			let par = {search:{}};
			indexClientKnowledge(par).then(res => {
				console.log(res, 'post请求');
			});
		},
		activityMsg(params) {
			this.activitylist = [];
			topicList(params.pageSize,params.pageNo).then(res => {
				res.data.records.map((item, index) => {
					this.activitylist.push({
						img: this.baseUrl.imgUrl + item.topicImg,
						id: item.topicId,
						tit: item.topicName,
						upSign: item.signUp,
						state: item.checkStatus,
						dic: item.txt
					});
				});
			});
		},
		//首页统计信息
		messageAPI(n) {
			getAction().then(res => {
				let n = 0;
				for (var key in res.data) {
					if (n < this.ic.length) {
						this.imgIcon.push({
							text: this.ic[n].text,
							num: res.data[key],
							ic: this.ic[n].ic
						});
						n = n + 1;
					}
				}
			});
		},
		// 事件详情
		itemDic(val) {
			console.log(val);
			uni.navigateTo({
				url: '../detail/detail?atcId=' + val.id,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		// 查看更多
		more(i) {
			console.log(i);
		}
	}
};
</script>

<style>
.uni-common-mt {
	background-color: #e4e3e4;
}
.banner {
	width: 720rpx;
	height: 280rpx;
	margin: 10rpx auto;
	display: block;
	padding: 0;
	border-radius: 10rpx;
	box-shadow: 0px 2px 4px #c8c7cc;
}
/*  #ifdef  MP-WEIXIN  */
.banner-warp {
	top: -25rpx;
}
/*  #endif  */

.notice-tip {
	margin-top: 20rpx;
}
.icon-tip {
	background-color: #fff;
	padding: 5rpx 0;
}
.flex {
	display: flex;
}
.icons {
	width: 100%;
	text-align: center;
	display: inline-block;
	justify-content: center;
}
.icon-img {
	flex-wrap: wrap;
	align-content: flex-start;
}
.icon-img .icon-img-item {
	/* padding: 0 20rpx */
	width: 25%;
	margin: 10rpx 0;
}
.icon-img .icon-dic {
	color: #a9a9a9;
}
.icon-dic {
	display: inline-block;
	flex-wrap: nowrap;
	text-align: center;
	width: 100%;
	color: #1ba2ff;
}
.icon-dic-num {
	color: red;
	font-weight: 700;
}
</style>
